<template>
  <div class="dashboard">
    <h1>📊 数据仪表板</h1>
    
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#409eff"><Tickets /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.tickets }}</h3>
              <p>总票务数</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#67c23a"><User /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.users }}</h3>
              <p>注册用户</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#e6a23c"><Money /></el-icon>
            </div>
            <div class="stat-info">
              <h3>¥{{ stats.revenueToday }}</h3>
              <p>今日收入</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon size="40" color="#f56c6c"><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.ordersToday }}</h3>
              <p>今日订单</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📈 销售趋势</span>
          </template>
          <v-chart 
            class="chart" 
            :option="salesTrendOption" 
            autoresize
          />
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>🥧 票务类型分布</span>
          </template>
          <v-chart 
            class="chart" 
            :option="ticketTypeOption" 
            autoresize
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-card class="recent-activities">
      <template #header>
        <span>🕒 最近活动</span>
      </template>
      <el-table :data="recentActivities" style="width: 100%">
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="user" label="用户" width="120" />
        <el-table-column prop="action" label="操作" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag 
              :type="scope.row.status === '成功' ? 'success' : 'warning'"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { analyticsAPI } from '@/api'
export default {
  name: 'Dashboard',
  data() {
    return {
      // 销售趋势图表配置
      salesTrendOption: {
        title: {
          text: '近7天销售趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#409eff'
          }
        }]
      },
      
      // 票务类型分布图表配置
      ticketTypeOption: {
        title: {
          text: '票务类型分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '演唱会' },
            { value: 735, name: '话剧' },
            { value: 580, name: '电影' },
            { value: 484, name: '体育赛事' },
            { value: 300, name: '其他' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      
      // 最近活动数据
      recentActivities: [],
      // 仪表盘统计
      stats: { tickets: 0, users: 0, revenueToday: 0, ordersToday: 0 }
    }
  },
  async mounted() {
    await this.loadDashboard()
    await this.loadSalesTrend()
    await this.loadTicketDistribution()
    await this.loadRecentActivities()
  },
  methods: {
    async loadDashboard() {
      try {
        const s = await analyticsAPI.getDashboardStats()
        this.stats = {
          tickets: s?.tickets ?? 0,
          users: s?.users ?? 0,
          revenueToday: s?.revenueToday ?? 0,
          ordersToday: s?.ordersToday ?? 0
        }
      } catch (_) {}
    },
    async loadSalesTrend() {
      try {
        const t = await analyticsAPI.getSalesTrend()
        const labels = t?.labels || ['周一','周二','周三','周四','周五','周六','周日']
        const values = t?.values || [820, 932, 901, 934, 1290, 1330, 1320]
        this.salesTrendOption = {
          ...this.salesTrendOption,
          xAxis: { type: 'category', data: labels },
          series: [{ data: values, type: 'line', smooth: true, itemStyle: { color: '#409eff' } }]
        }
      } catch (_) {}
    },
    async loadTicketDistribution() {
      try {
        const d = await analyticsAPI.getTicketTypeDistribution()
        const data = Array.isArray(d) ? d : (d?.data || [])
        this.ticketTypeOption = {
          ...this.ticketTypeOption,
          series: [{ type: 'pie', radius: '50%', data: data.length ? data : this.ticketTypeOption.series[0].data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.5)' } } }]
        }
      } catch (_) {}
    },
    async loadRecentActivities() {
      try {
        const activities = await analyticsAPI.getRecentActivities()
        this.recentActivities = Array.isArray(activities) ? activities : []
      } catch (error) {
        console.error('加载最近活动失败:', error)
        this.recentActivities = []
      }
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 0;
  max-width: 100%;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  margin-right: 20px;
}

.stat-info h3 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.stat-info p {
  margin: 5px 0 0 0;
  color: #666;
  font-size: 14px;
}

.charts-row {
  margin-bottom: 20px;
}

.chart {
  height: 300px;
}

.recent-activities {
  margin-top: 20px;
}

/* 高分辨率适配已移至全局配置 src/styles/responsive.scss */

/* 响应式网格布局优化 */
@media screen and (max-width: 1200px) {
  .chart {
    height: 250px;
  }
}

@media screen and (max-width: 768px) {
  .stat-card {
    height: 100px;
  }
  
  .stat-info h3 {
    font-size: 20px;
  }
  
  .stat-info p {
    font-size: 12px;
  }
  
  .chart {
    height: 200px;
  }
}
</style>